<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
</head>


<body>
<div id="box">
    <div class="row justify-content-center m-3"><h1>管理系统工作报告</h1></div>
    <div class="row justify-content-center m-2">
        <p>姓名：<input type="text" ref="name">  部门：<input type="text" ref="bumen"> <input type="button" value="查找" @click="post()"></p>
    </div>

    <table class="table" id="table" >
        <thead>
        <tr>
            <th scope="col">员工编号</th>
            <th scope="col">姓名</th>
            <th scope="col">部门</th>
            <th scope="col">报告名称</th>
            <th scope="col">上传时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr V-for="tt in msg">
            <th scope="row">{{tt.user_id}}</th>
            <td>{{tt.user_name}}</td>
            <td>{{tt.dept_name}}</td>
            <td>{{tt.report_file_path}}</td>
            <td>{{tt.create_time}}</td>


            <td>
                <div class="dropdown">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                       data-toggle="dropdown" aria-expanded="false">
                        选项
                    </a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal1">查看</a>
                        <a class="dropdown-item" data-target="#myModal" data-toggle="modal">修改</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal">删除</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal">导出</a>


                    </div>
                </div>
            </td>

        </tr>

        </tbody>
    </table>

    <!--    查看-->
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel1">查看</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>




</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script type = "text/javascript">
    window.onload = function(){
        new Vue({
            el:'#box',
            data(){
                return{
                    msg:null
                }
            },
            methods:{
                post:function(){
                    //发送 post 请求 查找报告
                    this.$http.post('./wsall',{name:this.$refs.name.value,bumen:this.$refs.bumen.value},{emulateJSON:true}).then(response => (this.msg = response.data))

                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }
            }
        });
    }
</script>
</body>
</html>